<template>
    <div>
      <el-row>
        <div class="nearShoper">
          <div class="shoperbars">
            <span></span>
            <span></span>
            <span></span>
          </div>
          <div class="shoperText">附近商家</div>
        </div>
      </el-row>

      <div class="shoperlists" v-if="shops.length">
        <div class="shoperlistRow" v-for="(shop, index ) in shops" :key="index"
        @click="$router.push('/shop')" > <!--可以回退，用push-->

          <div class="imgNtex">
            <div class="imgcontainer">
              <img :src="imgBaseUrl + shop.image_path" alt="">
            </div>
            <div class="textcontainer">
              <div class="shrink">{{shop.name}}</div>
              <div class="textStrs"><img src="./img/ball.jpg" alt="" style="color: #f07373"><span>4.1</span></div>
              <div>delivery</div>
            </div>
          </div>

          <div class="deliveryRate">
            <p v-for="activity in shop.activities"  :style="'color:#' + activity.icon_color">{{activity.icon_name}}</p>
            <div class="accurate" >
              {{shop.delivery_mode.text}}
            </div>
          </div>
        </div>
      </div>

      <div  v-else>
      <div  v-for="item in 6" >
        <img src="./img/shop_back.svg" alt="">
      </div>
      </div>

    </div>
</template>

<script>
  import { mapState } from  'vuex'
    export default {
        name: "ShopList",

      data(){
        return{
          imgBaseUrl: 'http://cangdu.org:8001/img/'
        }
      },
      computed: {
          ...mapState(['shops'])
      }
    }
</script>

<style scoped>
  .shoperlists .shoperlistRow{position: relative;justify-content: space-between;display: flex;font-size: 12px}
  .shoperlistRow .imgNtex,.shoperlistRow .deliveryRate{width: 50%}
  .shoperlistRow .imgNtex{position: relative;display: flex;text-align: left;margin:auto 3px }
  .shoperlistRow .imgNtex .imgcontainer{width: 30%}
  .shoperlistRow .imgNtex .imgcontainer img{width: 100%;}
  .shoperlistRow .imgNtex .textcontainer{margin-left: 4px}

  .nearShoper{
    display: flex;
  }
  .shoperbars{
    position: relative;
    height: 25px;
    display: flex;
    line-height: 25px;
  }
  .shoperbars{width: 14%}
  .shoperbars span{
    position: absolute;
    display: block;
    height: 2px;
    width: 21px;
    background-color: #636368;

    margin-left: 8px;
  }
  .shoperbars span:nth-child(1){
    margin-top:4px;
  }
  .shoperbars span:nth-child(2){
    margin-top: 8px;
  }
  .shoperbars span:nth-child(3){
    margin-top: 12px;
  }
  .shoperText{width: 15%;height: 25px;line-height: 25px;font-size: 12px;left: 0}
  .textStrs img{width: 14px;height: auto}
  .accurate{width: 40%;background-color: #d3f0b3;margin: 0 auto;color: green}
  .shrink{ overflow:hidden;text-overflow: ellipsis;white-space: nowrap;width: 90px}
  .iconName{color: #f07373}
</style>
